<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Delete</title>
</head>

<body>
    <table border="1px">
        <tr>
            <th>check</th>
            <th>num</th>
            <th>task</th>
            <th>time</th>
        </tr>
        {% for item in items %}
        <tr>
            <td><input type="checkbox" class="check"></td>
            <td>{{item['num']}}</td>
            <td>{{item['task']}}</a></td>
            <td>{{item['time']}}</td>
        </tr>
        {% endfor %}
    </table>
    <br>
    <input type="button" value="Delete" onclick="remove()">
    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script>
        function remove() {
            check = $('.check');
            var names = [];
            {% for name in names %}
            names.push('{{name}}')
            {% endfor %}
            num = "";
            for (let index = 0; index < check.length; index++) {
                if ($(check[index]).is(':checked')) {
                    num = num + (index + 1).toString()
                }
            }
            if (num.length == 0) {
                return;
            }
            $.post({
                url: '/remove',
                data: {'num': num},
                success: (data) => {
                    if (data == 'success') {
                        window.location.href = '/';
                    } else {
                        alert('Fail To Remove!!!')
                    }
                }
            })
        }
    </script>

</body>

</html>
